<template>
    <div class="hs">
        <form action="/">
            <van-search
                    v-model="value"
                    show-action
                    shape="round"
                    background="#fff"
                    placeholder="请输入关键字"
                    @search="onSearch"
                    @cancel="onCancel"
                    @input="onInput"
                    id="cc"/>
        </form>
        <div v-if="fuzzySearch.length>0" style="background-color: #ffffff;padding: 0 10px;">
            <p v-for="v in fuzzySearch" style="line-height: 30px;
    color: #333;display: flex;justify-content: space-between;font-size: 14px;" @click="goSearch(v)">
                <span>{{v.words}}</span><span style="">约{{v.goods_num}}个商品</span></p>
        </div>
        <div style="background-color: #fff;
    padding: 10px 20px;box-sizing: border-box;color: #303133;
    font-size: 14px;" v-if="fuzzySearch.length<1">
            <!--搜索历史-->
            <div v-if="record.length>0">
                <p style="display: flex;justify-content: space-between;font-weight: 600;
    margin: 10px 0px;"><span>搜索历史</span>
                    <van-icon name="delete-o" @click="cleanH"/>
                </p>
                <ul style="list-style: none;display: flex;color: #303133;
    font-size: 14px;flex-wrap: wrap;">
                    <li v-for="v in record" style="color: rgb(48, 49, 51);background-color: rgb(243, 244, 246);
                    border-color: rgb(255, 255, 255);border-radius: 50px;padding: 9px 14px;margin: 0 5px"
                        @click="goSearchhistory(v)">{{v}}
                    </li>
                </ul>
            </div>
            <!--搜索发现-->
            <div>
                <p style="font-weight: 600;
    margin: 10px 0px;">搜索发现</p>
                <ul style="list-style: none;display: flex;color: #303133;
    font-size: 14px;justify-content: space-around">
                    <li v-for="v in typ" style="color: rgb(48, 49, 51);background-color: rgb(243, 244, 246);
                    border-color: rgb(255, 255, 255);border-radius: 50px;padding: 9px 14px;" @click="searchHot(v)">
                        {{v.hot_name}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import jsp from '../../../Api/Api'

    export default {
        name: "Homesearch",
        data() {
            return {
                value: '',
                typ: [],
                //添加历史
                history: [],
                //搜索历史
                record: [],
                //模糊搜索
                fuzzySearch: [],
            }
        },
        methods: {
            //回车搜索功能
            onSearch(val) {
                // console.log(val)
                let a = JSON.parse(localStorage.getItem('searchHistory'))
                if (!a) {
                    //没有的情况
                    if (val !== '') {
                        this.history.push(val)
                        this.record = this.history
                        localStorage.setItem('searchHistory', JSON.stringify(this.history))
                    }
                    this.$router.push({path: '/schgs', query: {keyword: val}})
                } else {
                    //已存在的情况
                    if (a.indexOf(val) == -1 && val !== '') {
                        this.history.push(val)
                        this.record = this.history
                        localStorage.setItem('searchHistory', JSON.stringify(this.history))
                    }
                    this.$router.push({path: '/schgs', query: {keyword: val}})
                }
            },
            onCancel() {
                this.$router.push('/home')
            },
            //当输入框有内容时触发的事件
            onInput(val) {
                //模糊搜索
                if (!val) {
                    this.fuzzySearch = []
                } else {
                    jsp.searchFuzzy(val).then(data => {
                        this.fuzzySearch = data.data
                    }).catch(error => console.log(error))
                }
            },
            //热门搜索功能点击事件
            searchHot(v) {
                this.$router.push({path: '/schgs', query: {keyword: v.hot_name}})
            },
            //模糊搜索出来的预选搜索点击事件
            goSearch(v) {
                this.$router.push({path: '/schgs', query: {keyword: v.words}})
            },
            goSearchhistory(v) {
                this.$router.push({path: '/schgs', query: {keyword: v}})
            },
            //清空历史记录
            cleanH() {
                localStorage.removeItem('searchHistory')
                this.record = []
                this.history = []
            },
            //页面聚焦函数
            thisFocus(){
                document.getElementById('cc').focus();
            }
        },
        created() {
            //历史记录标签
            if (localStorage.getItem('searchHistory')) {
                this.record = JSON.parse(localStorage.getItem("searchHistory"));
                console.log(this.record)
            }
            //创建预选标签
            jsp.recommended().then(data => {
                // console.log(data.data)
                this.typ = data.data
            }).catch(error => console.log(error))
        },
        mounted() {
            this.thisFocus();
            setTimeout(() => {
                this.thisFocus()
            }, 0);
        },
    }
</script>

<style scoped>

</style>